{% extends '::base.html.twig' %}
{% block javascript %}
	{{ parent() }}
	
	<script type="text/javascript">
	  (function() {
	    var po = document.createElement('script'); po.type = 'text/javascript'; 
	    po.async = true;
	    po.src = 'https://apis.google.com/js/plusone.js';
	    var s = document.getElementsByTagName('script')[0]; 
	    s.parentNode.insertBefore(po, s);
	  })();
	</script>
	
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) {return;}
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	
	<script type="text/javascript">
		function favoriteAction(id, action) {
		
			var request;
			if (window.XMLHttpRequest) { 
				// code for IE7+, Firefox, Chrome, Opera, Safari
  				request = new XMLHttpRequest();
			} else {
  				// code for IE6, IE5
  				request = new ActiveXObject("Microsoft.XMLHTTP");
  			}
	
			request.onreadystatechange=function(){
 	
 				if (request.readyState==4 && request.status==200){
   					
   					if(request.responseText == "success") {
   				
	   					//flip favorite action image
   						if(action == "add")
   							showFavoriteAction("remove");
   						else 
   							showFavoriteAction("add");
   							
						//clear message if previous action resulted in error
   						hideMessage();   							
   					
   					} else {
   						
   						if(action == "add")
   							showMessage("There was a problem adding the show from your favorites");
   						else
   							showMessage("There was a problem removing the show from your favorites");
   					}
 				}
			}
		
			var path;
			if(action == "add")
				path = "{{ path('_favorites_add', {'format':'raw', 'id':''}) }}";
			else
				path = "{{ path('_favorites_remove', {'format':'raw', 'id':''}) }}";
	
			//hack to append the actual id to route
			path += "/" + id;
	
			request.open("GET", path, true);
			request.send(null);
		
		}
	
		function showFavoriteAction(action) {
		
			var div = document.getElementById("favoritesDiv");
			div.innerHTML = "";

			var img = document.createElement("img");
			img.height = "50";
			img.width = "50";
		
			if(action == "remove") {
				img.onclick = new Function("favoriteAction({{ series[0].id }}, 'remove');"); 
				img.src = "{{ asset('bundles/showstop/img/favorite_remove.png') }}";
				img.alt = "Remove From Favorites";
				img.title = "Remove From Favorites";
			} else {
				img.onclick = new Function("favoriteAction({{ series[0].id }}, 'add');"); 
				img.src = "{{ asset('bundles/showstop/img/favorite_add.png') }}";
				img.alt = "Add To Favorites";
				img.title = "Add To Favorites";
			}
		
			div.appendChild(img);
		}
		
		function showMessage(message) {
	
			var msg = document.getElementById("message");
			msg.innerHTML = message;
			msg.style.display = "block";
		}
	
		function hideMessage() {
		
			var msg = document.getElementById("message");
			msg.style.display = "none";
		}
	
	</script>

	{% endblock %}
	
{% block body %}

	{{ parent() }}
	
			<div id="tv-info">
			
				<div id="user-actions" style="margin: 10px 0 10px 0">
					
					{% if is_granted('IS_AUTHENTICATED_FULLY') %}
					<div style="float: right">
						<a href="{{ path('_editseriespage', {'input': series[0].id}) }}"><img src="{{ asset('bundles/showstop/img/edit.jpg') }}" title="Edit This Page" /></a>
					
						<a href="{{ path('_notifications_add', { 'id': series[0].id } ) }}"><img height="30" width="30" src="{{ asset('bundles/showstop/img/add_notification.png') }}" alt="Add Notification" title="Add Notification" /></a>
						
						
						<div id="favoritesDiv" style="width:30px;height:30px;display:inline">
						{% if app.user.userFavorites.contains( series[0] ) %}
							<img onClick="favoriteAction({{ series[0].id }}, 'remove');" src="{{ asset('bundles/showstop/img/favorite_remove.png') }}" alt="Remove From Favorites" title="Remove From Favorites" />
						{% else %}
							<img onClick="favoriteAction({{ series[0].id }}, 'add');" src="{{ asset('bundles/showstop/img/favorite_add.png') }}" alt="Add To Favorites" title="Add To Favorites" />
						{% endif %}
						</div>
					</div>
					
					{% endif %}
					
					
					
					<g:plusone size="tall"></g:plusone>
					
					
					<div class="fb-like" data-send="false" style="top: -2px; height: 60px;" data-layout="box_count" data-show-faces="false"></div>
					
				</div>
				
				<div id="info-left" style="float:left; width: 300px">
					<div>
						<p id="message" style="color: red; display: none;" />
						<h3>Series: </h3>{{ series[0].name }}
					</div>
					<br style="clear: both" />
					<h3>First Aired: </h3>{{ series[0].firstaired }} 
					<br style="clear: both" />
					<h3 >Network: </h3>{{ series[0].network }} 
					<br style="clear: both" />
					<h3>Status: </h3>{{ series[0].status }}
					<br style="clear: both" />
					{% if series[0].returnDate != '' %}
					<h3>Return Date: </h3>{{ series[0].returnDate }} 
					{% endif %}
					<br style="clear: both" />
					{% if is_granted('IS_AUTHENTICATED_FULLY') %}
						<div style="width: 400px; height: 60px; float: left; text-align: left">
							<h3>Your Rating: </h3>
							<form id="rate" style="float:left" name="rate" action="{{ path('_addrating')}}" method="post">
								{{ form_widget(form.hdnRating)}}
								{{ form_widget(form.hdnUserID)}}
								{{ form_widget(form.hdnSeriesID)}}
									<ul class="rating {{ UserRating }}" id="UserRating">
										<li class="one">
											<a href="#" title="1 Star" onClick="document.getElementById('form_hdnRating').value = 1; document.getElementById('UserRating').className = 'rating onestar'; document.rate.submit();">1</a>
										</li>
										<li class="two">
											<a href="#" title="2 Stars" onClick="document.getElementById('form_hdnRating').value = 2; document.getElementById('UserRating').className = 'rating twostar'; document.rate.submit();">2</a>
										</li>
										<li class="three">
											<a href="#" title="3 Stars" onClick="document.getElementById('form_hdnRating').value = 3; document.getElementById('UserRating').className = 'rating threestar'; document.rate.submit();">3</a>
										</li>
										<li class="four">
											<a href="#" title="4 Stars" onClick="document.getElementById('form_hdnRating').value = 4; document.getElementById('UserRating').className = 'rating fourstar'; document.rate.submit();">4</a>
										</li>
										<li class="five">
											<a href="#" title="5 Stars" onClick="document.getElementById('form_hdnRating').value = 5; document.getElementById('UserRating').className = 'rating fivestar'; document.rate.submit();">5</a>					
										</li>
									</ul>
							</form>	<br style="clear:both" />
							{%if AvgRating != 0 %}
								<span style="font-size: 12px; position: relative; top: -20px;left: 150px"> Average: {{ AvgRating }}/5</span>
							{%else%}
								<span style="font-size: 12px;position: relative; top: -20px;;left: 150px"> Average: N/A</span>
							{%endif%}
					</div>
					{%else%}
						<br style="clear: both" />
						<div style="float:left"><h3>Average Rating: </h3></div>
						<div style="float:left">
							<ul class="ratingNoChange {{ OverallRating }}" id="OverallRating">
								<li class="one">
									<a href="#" title="1 Star">1</a>
								</li>
								<li class="two">
									<a href="#" title="2 Stars">2</a>
								</li>
								<li class="three">
									<a href="#" title="3 Stars">3</a>
								</li>
								<li class="four">
									<a href="#" title="4 Stars">4</a>
								</li>
								<li class="five">
									<a href="#" title="5 Stars">5</a>					
								</li>
							</ul>
						</div>
					{% endif %}
				</div>
				<!-- end info-left -->
				
				<div id="picture-right" style="width: 550px; height: 275px; overflow: hidden; float: right;">
					{% if series[0].path == '' %}
					<h3 style="text-align: center; margin-top: 50px">This series has no fan art. If you want to contribute please consider uploading some.
					{% else %}
					<img src="{{ asset('uploads/documents/' ~ series[0].path ) }}" />
					{% endif %}
				</div>
				<div style="clear: both"></div>
				<div id="bottom">
					<h3 style="float: none;">Description: </h3>{{ series[0].description }}
					<br style="clear: both" /><br />
					{%if suggest != null%}
						<h3>You May Also Like:</h3>
						<br style="clear: both" />
						<div style="text-align:center; font-weight:bold">
							{% for series in suggest %}
								<a href="{{ path('_seriespage', { 'id': series.id }) }}" style="padding:10px;">{{ series.name }}</a>
							{% endfor %}
						</div>
					{% endif %}	
				</div>
				<!-- end bottom -->
				
			</div>
		</div>
 {% endblock %}

